<template>
  <div>
    <el-form ref="form" :model="form">
      <el-row>
        <el-col :span="24">
          <el-form-item label="设备加工单:" prop="workArea" label-width="120px">剪切(优化断料)</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="加工单编号:" prop="workArea" label-width="120px">GD1699</el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="班组" prop="workArea" label-width="80px">
            <el-input v-model="form.team"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="加工人" prop="workArea" label-width="80px">
            <el-input v-model="form.processor"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="生产日期" prop="workArea" label-width="80px">
            <el-date-picker
              v-model="form.date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="注意事项" prop="workArea" label-width="80px">
            <el-input v-model="form.beCareful"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-table v-loading="loading" ref="multipleTable" :data="tableData" tooltip-effect="dark">
            <el-table-column label="序号" width="55" align="center">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="number" label="剪切号" align="center"></el-table-column>
            <el-table-column prop="workArea" label="工区" align="center"></el-table-column>
            <el-table-column prop="materialListName" label="料单名称" align="center"></el-table-column>
            <el-table-column prop="componentName" label="构件名称" align="center"></el-table-column>
            <el-table-column prop="serialNumber" label="料单序号" align="center"></el-table-column>
            <el-table-column prop="length" label="原材长度(mm)" align="center"></el-table-column>
            <el-table-column prop="numberOfRoots" label="根数" align="center"></el-table-column>
            <el-table-column prop="specifications" label="规格" align="center"></el-table-column>
            <el-table-column label="断料方案" align="center">
              <template slot-scope="scope">
                <img style="width: 100%;cursor: pointer;" :src="scope.row.diagram" alt="" @click="imgClick">
              </template>
            </el-table-column>
            <el-table-column prop="length" label="重量(kg)" align="center"></el-table-column>
            <el-table-column prop="length" label="料牌个数" align="center"></el-table-column>
            <el-table-column prop="number" label="料牌号" align="center"></el-table-column>
            <el-table-column prop="remarks" label="备注" align="center"></el-table-column>
            <el-table-column label="条形码" align="center">
              <template slot-scope="scope">
                <img style="width: 100%;cursor: pointer;" :src="scope.row.diagram" alt="" @click="imgClick">
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>

    <open-img-dialog ref="openImgDialog" />
  </div>
</template>

<script>
import openImgDialog from './open-img-dialog.vue'

export default {
  name: "",
  components: { openImgDialog },
  props: {},
  data() {
    return {
      form: {
        team: '',
        processor: '',
        date: '',
        beCareful: '',
      },

      loading: false,
      tableData: [
        {
          workArea: '工区1',
          number: 'LD123',
          subItem: '工区1-6#楼',
          materialListName: '料单名称1',
          componentName: '1#TL1',
          serialNumber: '1',
          specifications: 'φ10',
          diagram: require("@/assets/temporary-images/g1.png"),
          length: 540,
          numberOfRoots: 2,
          remarks: '上1排',
        },{
          workArea: '工区1',
          number: 'LD123',
          subItem: '工区1-6#楼',
          materialListName: '料单名称1',
          componentName: '1#TL1',
          serialNumber: '1',
          specifications: 'φ10',
          diagram: require("@/assets/temporary-images/g1.png"),
          length: 540,
          numberOfRoots: 2,
          remarks: '上1排',
        },{
          workArea: '工区1',
          number: 'LD123',
          subItem: '工区1-6#楼',
          materialListName: '料单名称1',
          componentName: '1#TL1',
          serialNumber: '1',
          specifications: 'φ16',
          diagram: require("@/assets/temporary-images/g1.png"),
          length: 160,
          numberOfRoots: 2,
          remarks: '上1排',
        },{
          workArea: '工区1',
          number: 'LD123',
          subItem: '工区1-6#楼',
          materialListName: '料单名称1',
          componentName: '2#TL2',
          serialNumber: '1',
          specifications: 'φ16',
          diagram: require("@/assets/temporary-images/g1.png"),
          length: 160,
          numberOfRoots: 2,
          remarks: '上1排',
        },
      ],

      assignTeamData: {},
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    reset() {
      this.$nextTick(function () {
        this.$refs.form.resetFields();
      });
    },
    deliveryData() {
      this.assignTeamData = {
        form: this.form,
        tableData: this.tableData
      };
      this.$emit("assignTeamData", this.assignTeamData);
    },
    imgClick() {
      this.$refs.openImgDialog.add()
    },
  },
};
</script>

<style scoped lang="scss"></style>
